import React, { PureComponent } from 'react';
import moment from 'moment/moment';
import {
  Form,
  Input,
  Select,
  DatePicker,
  Modal,
} from 'antd';
import { channel } from '../../../common/options';
import { delComma } from '@/utils/utils';

const FormItem = Form.Item;
const { Option } = Select;


@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);


    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }


  // 表单
  renderContent = () => {
    const { form, values } = this.props;
    const maxValue = (rule, value, callback) => {
      if (value > 1000000) {
        callback('请输入小于100万的授信额度!');
      }
      if (parseInt(value) !== Number(value) && Number(value) !== 0) {
        callback('请输入整数!');
      }
      callback();
    };
    const time = (currentDate) => {

      return currentDate.endOf('day').isAfter(moment().endOf('day'));
      console.log();
    };
    return [
      <FormItem key="amount" {...this.formLayout} label="授信额度">
        {form.getFieldDecorator('amount', {
          rules: [
            { required: true, message: '请输入授信额度！' },

            form.getFieldValue('channelNo') === 1 ? { validator: maxValue } : '',
          ],
          initialValue: values.amount ? delComma(values.amount) : '',
        })(<Input type={'Number'} placeholder="请输入授信额度" maxLength={7}/>)}
      </FormItem>,
      <FormItem key="channelNo" {...this.formLayout} label="资金渠道">
        {form.getFieldDecorator('channelNo', {
          rules: [{ required: true, message: '请选择资金渠道！' }],
          initialValue: Number(values.channelNo),
        })(
          <Select placeholder="请选择资金渠道" style={{ width: '100%' }}>
            {channel.map(item => (
              <Option value={item.key} key={item.key} disabled={item.disabled}>{item.value}</Option>
            ))}
          </Select>,
        )}
      </FormItem>,
      <FormItem key="expireTime" {...this.formLayout} label="到期时间">
        {form.getFieldDecorator('expireTime', {
          rules: [{ required: true, message: '请选择到期时间！' }],
          initialValue: values.expireTime ? moment(values.expireTime) : '',
        })(
          <DatePicker
            disabledDate={currentDate => !!currentDate &&(currentDate.endOf('day').isBefore(moment().endOf('day')))}
            style={{ width: '100%' }}
            placeholder="请选择到期时间"
          />,
        )}
      </FormItem>,

    ];
  };

  //弹窗
  render() {
    const { updateModalVisible, handleUpdateModalVisible, modalVisible } = this.props;
    //完成
    const handleNext = () => {
      const { form, values, handleUpdate, handleAdd, modalVisible } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        formVals.amount = parseInt(formVals.amount);
        formVals.expireTime = moment(formVals.expireTime).format('YYYY-MM-DD');
        if (modalVisible) {
          handleAdd(formVals);
        } else {
          handleUpdate(formVals);
        }
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={modalVisible ? '重新授信' : '授信'}
        visible={updateModalVisible}
        onOk={handleNext}
        onCancel={() => handleUpdateModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
